<template>
  <div class="play">
    <div class="video-container">
      <video :src="videoSrc" controls></video>
    </div>
    <div class="play-button">
      <el-button type="primary" @click="playAudio">播放音频</el-button>
    </div>
    <!-- 语音栏 -->
    <div v-if="showVoiceBar" class="voice-bar">
      正在播放语音...
    </div>
    <!-- 语音按钮 -->
    <img class="centered-button" src="@/assets/eye.jpg" @click="startSpeechRecognition">
    <!-- 语音输入弹窗 -->
    <el-dialog title="语音搜索" :visible.sync="showVoiceInput" @close="stopSpeechRecognition" class="voice-dialog" center>
      <div class="voice-input-dialog">
        <el-icon class="voice-icon" name="el-icon-microphone"></el-icon>
        <div class="voice-text">{{ voiceInputStatus }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: require('@/assets/test.mp4'), // 设置要播放的视频路径
      showVoiceBar: false, // 控制是否显示语音栏
      showVoiceInput: false, // 控制语音输入弹窗显示
      voiceInputStatus: '' // 语音输入状态信息
    };
  },
  methods: {
    playAudio() {
      // 播放音频文件
      const audio = new Audio(require('@/assets/test.mp3'));
      audio.play();

      // 显示语音栏
      this.showVoiceBar = true;

      // 监听音频播放结束事件，当音频播放结束后隐藏语音栏
      audio.addEventListener('ended', () => {
        this.showVoiceBar = false;
      });
    },
    startSpeechRecognition() {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          const audioContext = new (window.AudioContext || window.webkitAudioContext)();
          const source = audioContext.createMediaStreamSource(stream);
          const analyser = audioContext.createAnalyser();
          source.connect(analyser);
          analyser.fftSize = 256;
          const dataArray = new Uint8Array(analyser.frequencyBinCount);
          this.showVoiceInput = true;
          this.stream = stream;
          this.intervalId = setInterval(() => {
            analyser.getByteFrequencyData(dataArray);
            const average = dataArray.reduce((acc, cur) => acc + cur, 0) / dataArray.length;
            this.voiceInputStatus = average > 0 ? '当前正在进行语音输入...' : '未检测到声音，请大声一点';
          }, 1000);
          setTimeout(() => {
            this.voiceInputStatus = '语音转文字内容：我想要穿衣服';
            setTimeout(() => {
              this.stopSpeechRecognition();
            }, 2000);
          }, 3000);
        })
        .catch(error => {
          console.error('获取麦克风权限失败:', error);
        });
    },
    stopSpeechRecognition() {
      this.showVoiceInput = false;
      this.voiceInputStatus = '';
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
      if (this.stream) {
        this.stream.getTracks().forEach(track => track.stop());
        this.stream = null;
      }
      if (this.$route.path !== '/about') {
        this.$router.push('/about');
      }
    }
  }
};
</script>

<style scoped>
.play {
  position: relative; /* 设置为相对定位，用于子元素定位 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.video-container {
  width: 80%; /* 视频容器的宽度 */
  max-width: 800px; /* 视频容器的最大宽度 */
  height: 300px; /* 视频容器的高度 */
  overflow: hidden; /* 隐藏视频超出容器的部分 */
  display: flex;
  justify-content: center;
  align-items: center;
}

video {
  max-width: 100%; /* 视频最大宽度为容器宽度 */
  max-height: 90%; /* 视频最大高度为容器高度 */
  width: auto; /* 自动调整宽度 */
  height: auto; /* 自动调整高度 */
}

.play-button {
  left: 0; /* 左侧对齐 */
  right: 0; /* 右侧对齐 */
  margin: 0 auto; /* 水平居中 */
  z-index: 1; /* 确保按钮在视频之上 */
}

.centered-button {
  width: 250px; /* 调整按钮宽度为 250px */
  height: 250px; /* 调整按钮高度为 250px */
  margin-top: 40px; /* 将按钮顶部与上方元素的间距设置为 20px */
}


.voice-bar {
  position: fixed; /* 固定定位 */
  bottom: 20px; /* 距离页面底部 20px */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 水平居中 */
  background-color: #f0f0f0;
  padding: 10px 20px;
}

.voice-dialog {
  max-width: 90%;
  margin: 0;
  padding: 10px;
}

.voice-input-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-icon {
  font-size: 48px;
  color: #409EFF;
}

.voice-text {
  margin-left: 20px;
  font-size: 18px;
}

@media (max-width: 768px) {
  .play-button {
    bottom: 10px; /* 按钮距离视频框底部 10px */
  }
}
</style>
